<!-- 柱状图 -->
<template>
  <div class="chart-container">
    <div ref="barchart" class="barchart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: '按日统计趋势'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%' // 默认高度改为100%以自适应父容器
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  created() { },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.barchart, 'macarons')
    this.setOptions(this.chartData)
    // 监听窗口大小变化以重新渲染图表
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    // 移除窗口大小变化监听器
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    setOptions(chartData) {
      this.myChart.setOption({
        xAxis: {
          type: 'category',
          data: chartData.xAxis
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          data: ['紧急', '重要', '默认', '普通', '告知'],
          bottom: 10,
        },
        tooltip: {
          trigger: "item",
          backgroundColor: '#fff',
          textStyle: {
            color: '#000'
          }
        },
        series: [
          {
            name: "紧急",
            data: chartData.t1,
            type: 'bar',
            stack: "stack",
            barWidth: 50,
            itemStyle: {
              color: '#F56C6C'
            }
          },
          {
            name: "重要",
            data: chartData.t2,
            type: 'bar',
            stack: "stack",
            barWidth: 50,
            itemStyle: {
              color: '#E6A23C'
            }
          },
          {
            name: "默认",
            data: chartData.t3,
            type: 'bar',
            stack: "stack",
            barWidth: 50,
            itemStyle: {
              color: '#909399'
            }
          },
          {
            name: "普通",
            data: chartData.t4,
            type: 'bar',
            stack: "stack",
            barWidth: 50,
            itemStyle: {
              color: '#409EFF'
            }
          },
          {
            name: "告知",
            data: chartData.t5,
            type: 'bar',
            stack: "stack",
            barWidth: 50,
            itemStyle: {
              color: '#67C23A'
            }
          },
        ]
      })
      this.myChart.off('click');
      this.myChart.on('click', (params) => {
        this.$emit('barclick', params.name, this.title)
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.chart-container {
  display: flex;
  /* 使用弹性布局 */
  flex-direction: column;
  /* 垂直排列子元素 */
  height: 100%;
  /* 继承父组件高度 */
  width: 100%;
  /* 确保宽度填满父容器 */
}

.barchart {
  flex: 1;
  /* 占据全部可用高度 */
  width: 100%;
  /* 宽度填满容器 */
  min-height: 100px;
  /* 最小高度以确保图表可见 */
}
</style>